<template>
  <div class="hello">
    <h3>动态改变表单值</h3>
    <div class="form-wrapper">
      <div class="item-wrapper" v-for="(item, itemIndex) in formData" :key="itemIndex">
        <div v-if="item.type === 'select'">
          <select v-model="item.value" @change="init">
            <option :value="elm.value" v-for="(elm, elmIndex) in item.options" :key="elmIndex">
              {{elm.label}}
            </option>
          </select>
        </div>
        <div v-else-if="item.type === 'input' && (item.obj_key.search(/_/) < 0 || selectOptions.indexOf(item.obj_key) > -1)">
          <input type="text" v-model="item.value">
        </div>
      </div>
    </div>
<div>

</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      formData:[
        {
          obj_key:'key1sel',
          label: 'aa',
          type:'select',
          value:'key1',
          options:[
            {label:'1', value:'key1'},
            {label:'2', value:'key2'},
            {label:'3', value:'key3'},
            {label:'4', value:'key4'}
          ]
        },
        {
          obj_key:'key1sel_aa_key1',
          label: 'aa的',
          type:'input',
          value:'aa的key1'
        },
        {
          obj_key:'key1sel_aa_key2',
          label: 'aa的',
          type:'input',
          value:'aa的key2'
        },
        {
          obj_key:'key1sel_aa_key3',
          label: 'aa的',
          type:'input',
          value:'aa的key3'
        },
        {
          obj_key:'key1sel_aa_key3',
          label: 'aa的',
          type:'input',
          value:'aa的key4'
        },
        {
          obj_key:'key1input',
          label: 'aa的',
          type:'input',
          value:'aa的key5'
        },
        // 第二
        {
          obj_key:'key2sel',
          label: 'aa',
          value:'key1',
          type:'select',
          options:[
            {label:'1', value:'key1'},
            {label:'2', value:'key2'},
            {label:'3', value:'key3'},
            {label:'4', value:'key4'}
          ]
        },
        {
          obj_key:'key2sel_aa_key1',
          label: 'aa的',
          type:'input',
          value:'aa的key1'
        },
        {
          obj_key:'key2sel_aa_key2',
          label: 'aa的',
          type:'input',
          value:'aa的key2'
        },
        {
          obj_key:'key2sel_aa_key3',
          label: 'aa的',
          type:'input',
          value:'aa的key3'
        }
      ],
      selectOptions: ['key1sel_aa_key1']
    }
  },
  watch: {
    formData(){
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.selectOptions = []
      this.formData.forEach(elm=>{
        if(elm.type === 'select') {
          this.selectOptions.push(`${elm.obj_key}_${elm.label}_${elm.value}`)
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-wrapper{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 30%;
}
.form-wrapper .item-wrapper{
  flex: 1 1 40%;
  margin-bottom: 20px;


}
.form-wrapper .item-wrapper > * > * {
  width: 90%;
  margin: 0 auto;
}
</style>
